<template>
  <!-- 订单管理首页 -->
  <div class="box">
    <h1>订单管理</h1>
       <hr  />
    <!-- 多选框 -->
    <div class="nav-1 clear" >
      <!-- 第一个下拉菜单 -->
      <el-select v-model="value2" placeholder="选择城市" class="input1">
        <el-option
          v-for="item in cityData"
          :key="item.id"
          :label="item.city"
          :value="item.city"
        >
        </el-option>
      </el-select>

      <!-- 输入框 -->
      <el-input
        type="text"
       v-model="name"
        placeholder="请输入要查询的派工单位、用户姓名、车牌号或者手机号"
        class="input1"
      ></el-input>

      <!-- 第三个下拉菜单 -->
      <el-select v-model="value3" placeholder="订单类来源" class="input1">
        <el-option
          v-for="item in orderSource"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <!-- 第四个下拉菜单 -->
      <el-select v-model="value4" placeholder="订单状态(全部)" class="input1">
        <el-option
          v-for="item in orderStatusData"
          :key="item.id"
          :label="item.orderStatus"
          :value="item.orderStatus"
        >
        </el-option>
      </el-select>
      <!-- 日历 及查询-->
      <div class="block">
        <span class="demonstration">下单时间</span>
        <el-date-picker
          class="riLi"
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
        <el-button
          type="primary"
          class="chaXun"
          @click="queryLike(value2,name, value3, value4)"
          >查询</el-button
        >
        <!-- value2, value3, value4, value1 -->
      </div>
    </div>
    <div class="nav-2">
      <el-button type="primary" @click="add">添加订单</el-button>
      <el-button type="primary" @click="selectNotReturnedOrder" class="chaXun"
        >还车订单</el-button
      >
      <el-button type="primary" class="chaXun">导出订单</el-button>
      <el-button type="primary" class="chaXun">导出第三方订单</el-button>
      <el-button type="primary" class="chaXun"
        >导入订单</el-button
      >
      <el-button type="primary" class="chaXun" @click="del(delData)"
        >删除</el-button
      >
    </div>
    <div class="nav-3">
      <el-table
        ref="multipleTable"
        :data="allOrder"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="订单编号" prop="number" width="120">
          <!-- <template slot-scope="scope">
            
          </template> -->
          <template slot-scope="scope">
            <div>
              <router-link
                :to="{
                  
                    name:
                    scope.row.orderType.orderType == '理赔'
                      ? 'order:insuranceorder'
                      : scope.row.orderType.orderType == '验车'
                      ? 'order:inspectorder'
                      : scope.row.orderType.orderType == '领标'
                      ? 'order:bringorder'
                      : scope.row.orderType.orderType == '异地委托函'
                      ? 'order:remoteorder'
                      : scope.row.orderType.orderType == '新车上牌'
                      ? 'order:newcarorder'
                      : null,
                  params: { data: scope.row, requestInfo: requestInfo },
                }"
              >
                <div>
                  {{ scope.row.number }}
                </div>
              </router-link>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="orderType.orderType"
          label="订单类型"
          width="100"
        >
        </el-table-column>
        <el-table-column
       
          prop="name"
          label="姓名"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="city.city" label="城市" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="orderSource.orderSource"
          label="订单来源"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="phone" label="手机号" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="carId" label="车牌号" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="diver" label="接车司机" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="isReturn" label="是否还车" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="returnDriver"
          label="还车司机"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="pay.status"
          label="订单状态"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="下单时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="status.orderStatus"
          label="付款状态"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
    </div>

    <div class="pageDiv">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="pageCount"
        :page-size="pageSize"
        @current-change="currentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
const cityOptions = ["上海", "北京", "广州", "深圳"];
export default {
  created() {
    // 获取订单源
    this.getSource();
    //订单状态
    this.getStatus();
    // 查询所有订单的方法
    this.selectAllOrder(this.page, this.pageSize);
    //城市下拉框
    this.getName();
  },

  data() {
    return {
      //通过订单编号跳转页面查询到的参数
      requestInfo: "",
      // 测试,
      couponList: [],
      page: 1,
      pageCount: null,
      pageSize: 3,
      //下拉菜单
      // 删除数据
      delData: [],
      // 订单来源
      orderSource: [],
      //订单状态
      orderStatusData: [],
      cityData: [],
      option2: [],

      value2: "",
      value3: "",
      value4: "",
      // 日历
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      value1: "",
      // 多选按钮
      checkAll: false,
      // checkedCities: ["上海", "北京"],
      cities: cityOptions,
      isIndeterminate: true,
      name:'',
      
      multipleSelection: [],
      // 所有订单的列表数据
      allOrder: [],
    };
  },
  methods: {
    // 数据转化为数组包含对象 用于下拉选择框数据处理
    toArr(res) {
      var shuju = [];
      for (var i = 0; i < res.length; i++) {
        var obj = {
          value: "",
          label: "",
        };
        obj.value = res[i];
        obj.label = res[i];
        shuju.push(obj);
      }
      return shuju;
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //点击单选框和全选框
    handleSelectionChange(val) {
      // this.multipleSelection = val;
      this.delData = val;
      console.log("aaa被点击el", this.delData);
    },
    del(delData) {
      // let id = []
      console.log("aaa被点击", delData);
      for (var i = 0; i < delData.length; i++) {
        // id.push(delData[i].id)
        //删除请求
        let ids = String(delData[i].id);
        this.$http({
          url: "/order/deleteOrders",
          method: "POST",
          data: { ids },
        })
          .then((res) => {
            console.log("删除成功", res);
          })
          .catch((err) => {
            console.log("删除失败", err);
          });
      }
    },
    //点击订单编号跳转页面
    selectOrderDetail(number, type) {
      this.$http({
        url: "/order/selectOrderDetail",
        method: "POST",
        data: {
          number,
          type,
        },
      })
        .then((res) => {
          this.requestInfo = res.data;
          //  console.log('跳转订单',res.data)
        })
        .catch((err) => {
          console.log("跳转订单失败", err);
        });
    },
    // toNewPage(number, type) {
    //   // console.log('编号被点击',number,type)
    //   this.selectOrderDetail(number, type);
    // },
    // 添加按钮
    add() {
      // this.$router.push('/order/addorder')
      this.$router.push({ name: "order:addorder", params: { userId: 123 } });
      // console.log(this.$router);
      // console.log('被点击了');
    },
    // toOrderXiangQing() {
    //   console.log("订单编号被点击");
    // },

    // 下拉选择框：获取订单来源
    getSource() {
      this.$http({
        url: "/order/getSource",
        method: "GET",
      })
        .then((res) => {
          // console.log('订单来源数据', res.data.data)
          this.orderSource = this.toArr(res.data.data);
          // console.log('订单来源数据', this.orderSource)
        })
        .catch((err) => {
          console.log("订单来源数据获取失败", err);
        });
    },
    // 下拉选择框：获取订单状态
    getStatus() {
      this.$http({
        url: "/order/getStatus",
        method: "GET",
      })
        .then((res) => {
          this.orderStatusData = res.data.data;
        })
        .catch((err) => {
          console.log("订单来源数据获取失败", err);
        });
    },
    //下拉选择框查询所有城市
    getName() {
      this.$http({
        url: "/city/getName",
        methods: "GET",
      })
        .then((res) => {
          // console.log('城市下拉选择框', res)
          this.cityData = res.data.data;
        })
        .catch(() => {});
    },
    // 查询所有订单的方法 列表渲染
    selectAllOrder(page, pageSize) {
      this.$http({
        url: "/order/selectAllOrder",
        method: "POST",
        data: {
          page,
          pageSize,
        },
      })
        .then((res) => {
          for (var i = 0; i < res.data.data.length; i++) {
            if (res.data.data[i]) {
              res.data.data[i].isReturn = "是";
            } else {
              res.data.data[i].isReturn = "否";
            }
            if (res.data.data[i]) {
              res.data.data[i].pay.status = "已处理";
            } else {
              res.data.data[i].pay.status = "未处理";
            }
          }
           this.pageCount = res.data.count;
          this.allOrder = res.data.data;
         
          console.log("查询所有订单成功", res);
        })
        .catch((err) => {
          console.log("查询所有订单失败", err);
        });
    },
    //分页
    currentChange(page) {
      console.log("分页", page);
      this.page = page;
      this.selectAllOrder(page, this.pageSize);
    },
    //查询未还车订单
    selectNotReturnedOrder() {
      this.$http({
        url: "/order/selectNotReturnedOrder",
        method: "POST",
      })
        .then((res) => {
          console.log("未还车订单", res);
          this.allOrder = res.data.data;
        })
        .catch((err) => {
          console.log("未还车订单失败", err);
        });
    },
    //总表查询
    queryLike(city,name, orderSource, orderStatus) {
      // console.log('日历数据', value1)
      this.$http({
        url: "/order/queryLike",
        method: "POST",
        data: {
          city,
          name,
          orderSource,
          orderStatus,
          page: 1,
          pageSize: 10,
        },
      })
        .then((res) => {
          console.log("总表查询订单", res);
          this.allOrder = res.data.data;
        })
        .catch((err) => {
          console.log("总表查询订单失败", err);
        });
    },
  },
};
</script >

<style lang="scss" scoped>

.box {
  min-width: 1100px;
h1{
    margin-bottom: 10px;
    font-size: 30px;
}
.nav-1 {
   margin: 10px 0 0 0 ;
}

  input::-webkit-input-placeholder {
  font-size: 12px;
  color: red;
}

.nav-2 {
  margin: 20px 0 20px 0;
}

.input1 {
  width: 100px;
  height: 20px;
  margin-right: 20px;
  float: left;
}

.block {
  float: right;
}

.chaXun,
.riLi {
  margin-left: 20px;
}

.pageDiv {
  margin: 50px 0 0 0;
  text-align: center;
}
}
</style>